<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        width: 400px;
        height: auto;
        background-color: #aaa;

        display: flex;
        justify-content: space-around;
      }

      div {
        height: 50px;
        width: 50px;
      }

      .parent {
        background: red;

        position: relative;
      }

      .child {
        background: green;

        position: absolute;
        bottom: -50px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div id="A" class="parent">
        <div id="B" class="child"></div>
      </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
      $(() => {
        let $A = $('#A'),
          $B = $('#B'),
          $Container = $('.container')

        $B.hide()

        $A.hover(
          () => {
            $B.fadeIn()
          },
          e => {
            if (e.toElement == $B[0] || e.toElement == $Container[0]) return
            $B.fadeOut()
          }
        )

        $B.mouseout(function (e) {
          if (e.toElement == $A[0] || e.toElement == $Container[0]) return
          $(this).fadeOut()
        })

        let $con = $('.container')
        for (let i = 0; i < 5; i++) {
          let parent = $('<div class="parent"></div>')
          let child = $('<div class="child"></div>')
          $con.append(parent)
          parent.append(child)
          $(child).fadeOut()

          $(parent).hover(
            () => {
              $(child).fadeIn()
            },
            e => {
              if (e.toElement == $(parent) || e.toElement == $('.container')) return
              $(child).fadeOut()
            }
          )
        }
      })
    </script>
  </body>
</html>
